// components/z-form/zy-radio-group.js
const formCom = require('./zy-form-com');
const Nid = require('../../common/nid');
const { deepClone } = require('../../common/clone');
const { toggleArray } = require('../../common/array')

module.exports = Behavior({
    behaviors: [formCom],

    properties: {
        options: {
            type: Array,
            value: null
        },
        multiple: Boolean
    },

    data: {
        list: [],
        currentId: '',
        currentIds: [],
        getItemCls(item) {
            let cls = 'zy-radio'
            if (this.multiple) {
                if (this.currentIds.includes(item[0])) {
                    cls = cls + ' zy-radio--checked'
                }
            }
            else {
                if (this.currentId === item[0]) {
                    cls = cls + ' zy-radio--checked'
                }
            }
            return cls
        }
    },

    methods: {
        setLabels(labels = []) {
            if (!Array.isArray(labels)) {
                labels = []
            }
            let list = labels.map(v => {
                return [Nid(), {...v}]
            })
            this.setData({
                list: list,
                // currentId: list[0][0],
            })
        },
        m_click(e, {handle} = {}) {
            // console.log('m_click', e);
            let itemid = e.target.dataset.itemid;
            let currentIds = deepClone(this.data.currentIds);

            toggleArray(currentIds, itemid);

            let newIds =  [...new Set(currentIds)];

            this.setData({
                currentId: itemid,
                currentIds: newIds,
                list: this.data.list.slice(0)
            });

            if (handle) {
                handle()
                return;
            }

            if (this.data.multiple) {
                let values = this.getList().filter(v => {
                    return newIds.includes(v[0])
                });
                this.triggerEvent('change', {
                    value: values.map(v => v[1].value)
                })
            }
            else {
                this.triggerEvent('change', {
                    ...this._getCurrent()
                })
            }
        },
        _getCurrent() {
            let item = this.data.list.find(v => v[0] === this.data.currentId)
            return item[1]
        },
        findItem(findVal, findKey = 'value') {
            let item = this.data.list.find(v => {
                return v[1][findKey] === findVal
            })
            return item
        },
        setChecked(newVal) {
            let item = this.findItem(newVal);
            if (item) {
                // console.log('findItem', item); 
                this.setData({
                    currentId: item[0],
                    list: this.data.list.slice(0)
                })   
            }
        },
        setMutlipleChecked(newVal) {
           if (!Array.isArray(newVal)) {
               newVal = []
           }
           let list = this.getList()
           let newIds = []
           list.forEach(v => {
               if (newVal.includes(v[1].value)) {
                   newIds.push(v[0])
               } 
           });

           this.setData({
                currentIds: newIds,
                list: this.data.list.slice(0)
            })   
        //    console.log('newVal', newVal);
        },
        setOption(nid, newOption) {
            let newList = this.data.list.slice(0)
            let index = newList.findIndex(v => {
                return v[0] === nid
            });
            if (index > -1) {
                newList[index] = [nid, newOption]
            }
            this.setData({
                list: newList
            });
            // console.log('index', index);
        },
        getList() {
            return deepClone(this.data.list)
        },
        getValues() {
            return deepClone(this.data.list).map(v => {
                return v[1]
            }) 
        },
        setList(newList) {
            this.setData({
                list: newList
            })
        }
    },

})